import { h } from 'preact';

import { Row, Col } from "@preact/grid";
import { TextInput, CheckInput, DropDown } from "@preact/base/input"; 
import { CHART_TYPES_MAP, CHART_SERIES_TYPES } from "@charm:data/model/echart";
import { isArray, isObject, isString, isNumber, isBoolean } from "@libs/is";
import { getData } from "@store/data";
import { envoke } from "@store";

import "@static:css/components/config/obj-panel/index.less";

const ArrayPanel = ({data = [], uuid, mapKey}) => {
    return <div className="c-array-panel">
        {data.map((value, index) => {
            const label = `值${index+1}`;
            return <div className="c-array-panel-item" key={index}>
                <Row>
                    <Col cols={8}>
                        {label}
                    </Col>
                    <Col cols={10}>
                        <TextInput value={value} onFinished={value => {
                            const { chart } = getData(uuid);
                            const data = chart[mapKey];
                            if(data.data[index] !== value){
                                data.data[index] = value;
                                envoke(uuid, 'setOption', {});
                            }
                        }} />
                    </Col>
                    <Col cols={10} style={{textAlign: 'center'}}>
                        <button onClick={e => console.log(e)}>...</button>
                    </Col>
                </Row>
            </div>
        })}
    </div>
}

export const SeriesPanel = ({data = {}, uuid}) => {
    const lists = Object.keys(data);
    const mainKey = data.type;
    return <div className="obj-panel">
            {lists.map((pkey, index) => {
                const val = data[pkey];
                const { label, dropLists = null } = CHART_SERIES_TYPES[mainKey][pkey];
                debugger
                return <div className="obj-panel-item" key={index}>
                    <Row>
                        <Col cols={8}>
                            {label}
                        </Col>
                        <Col cols={16}>
                            {isString(val) || isNumber(val) ? (dropLists ? <DropDown lists={dropLists} />: <TextInput value={val} />) : ""}
                            {isBoolean(val) ? <CheckInput checked={val} /> : ""}
                            {isObject(val) ? (
                                Object.keys(val).map((e, i) => {
                                    const v = val[e];
                                    const { label, dropLists = null } = CHART_SERIES_TYPES[mainKey][pkey][e];
                                    return  <div className="obj-panel-item" key={i}>
                                        <Row>
                                            <Col cols={8}>
                                                {label}
                                            </Col>
                                            <Col cols={16}>
                                                {isString(v) || isNumber(v) ? (dropLists ? <DropDown lists={dropLists} />: <TextInput value={v} />) : ""}
                                                {isBoolean(v) ? <CheckInput checked={v} /> : ""}
                                            </Col>
                                        </Row>
                                        {
                                            isArray(v) ? 
                                            <Row> 
                                                <ArrayPanel uuid={uuid} data={v} /> 
                                            </Row> : ""
                                        }
                                    </div>
                                })
                            ) : ""}
                        </Col>
                    </Row>
                </div>
            })}
        </div>

}

export default ({uuid, mapKey}) => {
    const chart = getData(uuid, "chart");
    const data = chart[mapKey];
    const lists = Object.keys(data);
    const mainKey = mapKey;
    return <div className="obj-panel">
            {lists.map((pkey, index) => {
                
                const val = data[pkey];
                //console.log(mainKey, pkey, CHART_TYPES_MAP);
                const {label, dropLists = null} = CHART_TYPES_MAP[mainKey][pkey];
                return <div className="obj-panel-item" key={index}>
                    <Row>
                        <Col cols={8}>
                            {label}
                        </Col>
                        <Col cols={16}>
                            {isString(val) || isNumber(val) ? (dropLists ? <DropDown lists={dropLists} />: <TextInput value={val} />) : ""}
                            {isBoolean(val) ? <CheckInput checked={val} onChange={checked => {
                                data[pkey] = checked;
                                envoke(uuid, 'setOption', {});
                            }} /> : ""}
                        </Col>
                    </Row>
                    {
                        isArray(val) ? 
                        <Row style={{
                                backgroundColor: "rgba(0,0,0,0.1)",
                                padding: "8px 16px 8px 16px",
                                marginTop: "8px"
                            }}> 
                            <ArrayPanel uuid={uuid} data={val} mapKey={mapKey} /> 
                        </Row> : ""
                    }
                </div>
            })}
        </div>
};